<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            let index = 1;
            $("#more").click(function(){
                let d = $("#d").clone(true);
                // 设置新增div的id属性值,使其永不重复
                d.attr("id","d"+index);
                $(this).before(d);
                // 当前新增出来的元素会与原始元素完全一致
                // 如果原来的文件选择器选择了文件,此时克隆出来的文件选择器也会选择
                // 需要将新增出来的文件选择器中的文件清除掉
                // 新增出来的文件选择器一定是最后一个
                // $("input:last").val("");

                // 如果在页面后面也存在文件选择器
                // 那么此时新增出来的就不是最后一个了
                // 就不能用上面的方法实现,需要精确清除
                $("#d"+index+" input").val("");
                index++;
            });
            $("a").click(function(){
                // if($(this.parentNode).attr("id") != "d"){
                //     $(this.parentNode).remove();
                // }
                // 在jquery中提供parent方法用于获取父节点
                if($(this).parent().attr("id") != "d"){
                    $(this).parent().remove();
                }
            });

            $("#show").click(function(){
                // 当存在多个元素的时候,获取对应值的时候默认取的是第一个
                // console.log($("input[type='file']").val());

                // 我们可以通过遍历来访问所有元素
                // each(fn):遍历方法
                // fn可以无参,也可以有参
                // 无参:可以通过this表示当前迭代的元素
                $("input[type='file']").each(function(){
                    console.log($(this).val());
                })
                console.log("********************")

                // 一个参数:此时的参数表示的是当前迭代元素的索引号
                // 仍然可以使用this
                $("input[type='file']").each(function(index){
                    console.log("索引号:"+index+",文件名:"+$(this).val());
                })
                console.log("********************")
                // 两个参数
                // 参数一:索引号
                // 参数二:当前迭代的元素,DOM对象
                $("input[type='file']").each(function(index,element){
                    console.log("索引号:"+index+",文件名:"+$(element).val());
                })
            });
        })
    </script>
</head>
<body>
<!--
    1.上传更多需求
        当点击上传更多时,页面中新增一个与原始div中内容一致的元素
        里面包含了文件选择器与删除链接
        注意:如果原来的文件选择器中已经选择了内容然后点击上传更多
        此时新增的文件选择器中没有内容,但是原来的仍然有内容
    2.删除需求
        删除时可以删除新增出来的元素,原始的不能被删除
-->
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="show">查看文件名</button>
</body>
</html>